<template>
  <div class="dashboard-container">
    <!-- 头部区域 -->
    <el-card class="box-card">
      <div class="header">
        <img :src="phone" alt="" class="image">
        <div class="text">
          <p>早安，{{ name }}，祝你开心每一天！</p>
          <p>
            {{ name }} | {{ userinfo.company }}-{{ userinfo.departmentName }}
          </p>
        </div>
      </div>
    </el-card>
    <!-- 主体区域 -->
    <el-row type="flex" justify="space-between">
      <el-col :span="13" style="padding-right: 28px">
        <!-- 工作日历 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>工作日历</span>
          </div>
          <workCalender />
        </el-card>
        <!-- 公告 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>公告</span>
          </div>
          <ul>
            <li>
              <div class="item">
                <img src="@/assets/common/head.jpg">
                <div>
                  <p>
                    <span class="col">朱继柳</span>
                    发布了 第1期“传智大讲堂”互动讨论获奖名单公布
                  </p>
                  <p>2018-07-21 15:21:38</p>
                </div>
              </div>
              <el-divider />
            </li>
            <li>
              <div class="item">
                <img src="@/assets/common/bigUserHeader.png">
                <div>
                  <p>
                    <span class="col">朱继柳</span>
                    发布了 第2期“传智大讲堂”互动讨论获奖名单公布
                  </p>
                  <p>2018-07-22 14:45:36</p>
                </div>
              </div>
              <el-divider />
            </li>
            <li>
              <div class="item">
                <img src="@/assets/common/img.jpeg">
                <div>
                  <p>
                    <span class="col">朱继柳</span>
                    发布了 第3期“传智大讲堂”互动讨论获奖名单公布
                  </p>
                  <p>2018-07-23 15:20:42</p>
                </div>
              </div>
              <el-divider />
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="11">
        <!-- 流程申请 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="border">流程申请</span>
          </div>
          <el-button class="sideBtn" @click="dialogFormVisible = true">加班离职</el-button>
          <el-button class="sideBtn">调节休假</el-button>
          <el-button class="sideBtn" @click="$router.push('/users/approvals')">审批列表</el-button>
          <el-button class="sideBtn" @click="$router.push('/users/info')">我的信息</el-button>
        </el-card>
        <!-- 绩效指数 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>绩效指数</span>
          </div>
          <!-- 雷达图 -->
          <echRadar />
        </el-card>
        <!-- 快捷访问 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="border">快捷访问</span>
          </div>
          <el-row>
            <el-button class="sideBtn" type="primary" @click="$router.push('/employees')">员工</el-button>
            <el-button class="sideBtn" type="warning" @click="$router.push('/setting')">公司设置</el-button>
            <el-button class="sideBtn" type="info" @click="$router.push('/permission')">权限管理</el-button>
            <el-button class="sideBtn" type="danger" @click="$router.push('/setting')">危险按钮</el-button>
          </el-row>
        </el-card>
        <!-- 帮助链接 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="border">帮助链接</span>
          </div>
          <el-row>
            <el-col :span="8" type="flex">
              <el-row type="flex" justify="center">
                <a href="#" class="islink">
                  <span class="icon iconGuide" />
                  <p>入门指南</p>
                </a>
              </el-row>
            </el-col>
            <el-col :span="8" type="flex">
              <el-row type="flex" justify="center">
                <a href="#" class="islink">
                  <span class="icon iconHelp" />
                  <p>在线帮助手册</p>
                </a>
              </el-row>
            </el-col>
            <el-col :span="8" type="flex">
              <el-row type="flex" justify="center">
                <a href="#" class="islink">
                  <span class="icon iconTechnology" />
                  <p>联系技术支持</p>
                </a>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 对话框弹层 -->
    <el-dialog title="申请" :visible.sync="dialogFormVisible">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
        <el-form-item label="申请类型" :label-width="formLabelWidth">
          <el-select v-model="ruleForm.processName" placeholder="请选择申请类型">
            <el-option label="加班" value="加班" />
            <el-option label="离职" value="离职" />
          </el-select>
        </el-form-item>
        <el-form-item label="期望离职时间" :label-width="formLabelWidth" prop="exceptTime">
          <div class="block">
            <el-date-picker
              v-model="ruleForm.exceptTime"
              type="date"
              placeholder="选择日期"
            />
          </div>
        </el-form-item>
        <el-form-item label="离职原因" :label-width="formLabelWidth" prop="reason">
          <el-input
            v-model="ruleForm.reason"
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
          />

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetFn">重置</el-button>
        <el-button type="primary" @click="accomplishFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import workCalender from './components/work-calendar.vue'
import { startProcess } from '@/api/approvals/'
import echRadar from './components/echRadar.vue'
export default {
  name: 'Dashboard',
  components: {
    workCalender, echRadar
  },
  data() {
    return {
      defaultImg: require('@/assets/common/bigUserHeader.png'),
      ruleForm: { // 申请对话框的表单
        exceptTime: '',
        reason: '',
        processKey: 'process_dimission', // 特定的审批
        processName: '离职'
      },
      dialogFormVisible: false, // 申请对话框显示隐藏
      formLabelWidth: '120px',
      rules: {
        exceptTime: [{ required: true, message: '离职时间不能为空', trigger: 'blur' }],
        reason: [{ required: true, message: '离职理由不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name', 'phone'
    ]),
    ...mapState('user', ['userinfo'])
  },
  methods: {
    resetFn() { // 重置表单的方法
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        exceptTime: '',
        reason: '',
        processKey: 'process_dimission',
        processName: '离职'
      }
    },
    accomplishFn() { // 完成的方法
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          await startProcess({ ...this.ruleForm, userId: this.userinfo.userId, username: this.userinfo.username })
          this.$message.success('提交申请成功')
          this.resetFn()
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.box-card {
  margin-top: 20px;
}
.clearfix {
  font-size: 24px;
  .border {
    border-bottom: 4px solid #8a97f8;
    padding-bottom: 15px;
  }
}
.header {
  display: flex;
}
.text {
  padding-top: 25px;
  margin-left: 20px;
  p {
    margin: 0;
    padding-bottom: 15px;
    &:first-child {
      font-size: 24px;
    }
    &:last-child {
      font-size: 20px;
      color: #7f8c8d;
    }
  }
}
.image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  vertical-align: middle;
}
.sideBtn {
  padding: 16px 24px;
  font-size: 16px;
  margin: 10px 5px;
}
ul {
  margin: 0;
  padding: 0 30px;
  li {
    list-style: none;
    padding: 0;
  }
}
.item {
  display: flex;
  img {
    width: 56px;
    height: 56px;
    margin-right: 10px;
    vertical-align: middle;
  }
  p {
    padding: 0 0 8px;
    .col {
      color: #8a97f8;
    }
  }
}

.islink {
  .icon {
    display: inline-block;
    width: 76px;
    height: 76px;
    background: url(../../assets/common/icon.png);
  }
  .iconGuide {
    background-position: 0 0;
  }

  .iconHelp {
    background-position: -224px 0;
  }

  .iconTechnology {
    background-position: -460px 0;
  }
}
</style>
